<template>
  <div class="body">
    <basic-container>
      <div class="query_select">
        <div class="block">
          <span >更新时间:</span>
          <el-date-picker
            size="mini"
            v-model="queryDate"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getData"
            :clearable="false">
          </el-date-picker>
        </div>

        <!--筛选条件-->
        <cs-filter-query ref="csFilterQueryRef" :options="filterQueryOptions"
                         @change="handleChangeFilter"></cs-filter-query>
      </div>
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 :view-name="'account'"
                 :page.sync="page"
                 :row-class-name-rollback="getRowClassName"
                 ref="crud"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad(page)">
        <template slot="menuRight" slot-scope="{size}">
          <span  class="update_time">
          当前数据更新时间: {{updateTime}}
        </span>
          <el-tooltip v-if="false"  effect="dark" content="清空" placement="top">
            <el-button icon="el-icon-delete" size="small" circle @click="$refs.csFilterQueryRef.clear()"></el-button>
          </el-tooltip>
        </template>
        <template slot="accountStatusHeader" slot-scope="{column}">
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover"
          >
            <div class="popover_pane">
              <div>
                <i class="el-icon-info" style="color: #FF3A30"></i>
                <strong> 状态</strong>
              </div>
              <span>
                有效: 媒体上可正常投放
              </span>
              <span>
                无效: 媒体上不可投放
              </span>
            </div>
            <span slot="reference" class="text-link">{{(column || {}).label}}</span>
          </el-popover>
        </template>
        <template slot-scope="{row}" slot="platform">
          <div style="display: flex; flex-wrap: wrap;">
            <div style="width: 20px;margin-right: 4px"
                 v-for="(item) in platformLogo(row.platform)"
                 :key="item">
              <img style="width: 100%" :src="item.url" :title="item.name">
            </div>
          </div>
        </template>
        <template slot-scope="{row}" slot="accountStatus">
          <el-tag v-if="row.oldValue==0" effect="plain" type="success">有效</el-tag>
          <el-tag effect="plain" v-else type="danger">无效</el-tag>
            >
          <el-tag v-if="row.newValue==0" effect="plain" type="success">有效</el-tag>
          <el-tag effect="plain" v-else type="danger">无效</el-tag>
        </template>
      </avue-crud>
    </basic-container>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getUrlData, getSysDictList} from '@/api/system/dict';
import CsFilterQuery from "@/components/CsFilterQuery/CsFilterQuery";
import {
  accountStatusPage,
} from "@/api/business/toolKitApi";
import {findObjectList} from '@/util/util';
import {
  getOffer,getOperator
} from "@/api/dataReport/cost-report-new";
import {platformLogo} from '@/util/beetles';
import {thousandSeparator} from '@/util/util'
import {checkAuditTime,dateFormat} from '@/util/date'
import Moment from "moment";

export default {
  components: {
    CsFilterQuery
  },
  data() {
    const start = new Date();
    return {
      query: {
      },
      queryDate:[Moment(start).format('YYYY-MM-DD'), Moment(start).format('YYYY-MM-DD')],
      updateTime:'',
      loading: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      offerList: [],
      platformList: [],
      operatorList:[],
      statusChange:[
        { label :'无效>有效' ,value :'0'},
        { label :'有效>无效' ,value :'1'},
      ],
      option: {
        height:460,
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 120,
        menu:false,
        addBtn: false,
        selection: false,
        dialogClickModal: false,
        dialogWidth: 1200,
        column: [
          {
            label: "账户名",
            prop: "name",
            overHidden: true,
            addDisplay: false,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "账户ID",
            prop: "platformId",
            overHidden: true,
            addDisplay: false,
            editDisplay: true,
            viewDisplay: true,
          }, {
            label: "账户运营人",
            prop: "operator",
            type: 'select',
            dicData: [],
            props: {
              label: "realName",
              value: "id"
            },
            viewDisplay: true,
            searchLabelWidth: 100,
            overHidden: true,
          },
          {
            label: "订单名",
            prop: "offerName",
            type: 'select',
            viewDisplay: true,
            overHidden: true,
          },
          {
            label: "媒体",
            prop: "platform",
            type: 'select',
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            formsolt: true,
            overHidden: true,
          },
          {
            label: "账户状态变更",
            prop: "accountStatus",
            type: 'select',
            viewDisplay: true,
            overHidden: true,
          },
          {
            label: "无效原因",
            prop: "invalidReason",
            type: 'select',
            viewDisplay: true,
            overHidden: true,
          },
          {
            label: "更新时间",
            prop: "createTime",
            type: 'select',
            viewDisplay: true,
            overHidden: true,
          },
        ]
      },
      data: [],
      operatorId: [],
    };
  },
  computed: {
    ...mapGetters(["permission", "userInfo", "roles"]),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    // 媒体列表
    translatePlatformList() {
      return this.platformList.map(item => {
        return {
          label: item.dictValue,
          value: item.dictKey
        }
      })
    },
    // 筛选组件配置
    filterQueryOptions() {
      return [
        {
          value: 'name',
          label: '账户名',
        },
        {
          value: 'platformId',
          label: '账户ID',
        },
        {
          value: 'operatorName',
          label: '账户运营人',
          queryList: this.operatorList
        },
        {
          value: 'offerName',
          label: '订单名称',
          queryList: this.offerList
        }, {
          value: 'platform',
          label: '媒体',
          children: this.translatePlatformList
        }, {
          value: 'statusChange',
          label: '状态变更',
          children: this.statusChange
        },]
    },
  },
  created() {
    getSysDictList('platforms').then(map => {
      this.platformList = map['platforms'];
      findObjectList(this.option.column, 'platform', 'prop')[0].dicData = map['platforms'];
    });
    getUrlData('/api/blade-user/select/user').then(res => {
      findObjectList(this.option.column, 'operator', 'prop')[0].dicData = res.data.data;
    });
    this.getOfferList()
    this.getOperatorList();
  },
  mounted() {
    this.$nextTick(()=>{
      this.setUpdateTime();
    })
  },
  methods: {
    // 筛选框查询
    handleChangeFilter(val) {
      this.page.currentPage = 1;
      this.query = val
      this.onLoad(this.page)
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      let data = {};
      Object.assign(data,  this.query);
      data.startDate = this.queryDate[0];
      data.endDate = this.queryDate[1];
      accountStatusPage(page.currentPage, page.pageSize, Object.assign({}, params),data).then(res => {
        const data = res.data.data;
        data.records.map((row, index) => {
          this.operatorId[index] = row.operator
        })
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    async getData() {
      this.page.currentPage = 1;
      this.onLoad(this.page)
    },
    async getOfferList() {
      const {data: res} = await getOffer()
      this.offerList = res.data.map(item => {
        return {
          value: item.key,
          label: item.name
        }
      })
    },
    // 获取运营人
    async getOperatorList() {
      const {data: res} = await getOperator()
      this.operatorList = res.data.map(item => {
        return {
          value: item.key,
          label: item.name
        }
      })
    },
    getRowClassName({row}) {
      if (row.id == this.currOpRowId) {
        return "current-op-row";
      } else {
        return "";
      }
    },
    //媒体 logo
    platformLogo(platform) {
      return platformLogo(platform)
    },
    //钱千分位
    thousandSeparator(num){
      return Object.assign(thousandSeparator(num))
    },
    setUpdateTime(){
      let  nowDate =new Date();
      let dateStr = dateFormat(nowDate,'yyyy-MM-dd')
      let time = ['08:30','13:30','18:30']
      if (checkAuditTime(time[0],time[1])){
        this.updateTime = dateStr +" " +time[0];
      }
      else if (checkAuditTime(time[1],time[2])){
        this.updateTime = dateStr +" " + time[1];
      }
      else {
        this.updateTime = dateStr +" " +time[2];
      }

    },
  }
};
</script>
<style lang="scss" scoped>
/deep/ .current-op-row {
  background-color: #f5dab1;
}

.query_select {
  margin-left: 10px;
  display: flex;
  flex-direction: column;

  .block {
    margin-bottom: 5px;
    font-size: 14px;
  }
  .block span{
    color: #00a2ff;
    margin-right: 5px;
  }
}

.update_time{
  color:#999999 ;
  font-size: 14px;
  margin-right: 10px;
}

.popover_pane {
  display: flex;
  flex-direction: column;

  div {
    margin-left: 5px;


  }
  span {
    margin-left: 10px;
    font-size: 12px;
  }
}
.text-link {
  text-decoration: underline;
}
</style>
